<template>
  <view class="coupon-item-list" v-if="item.type==='option'">
    <view class="coupon-item-list-title">{{item.title}}</view>
    <!-- <view>{{item.val}}</view> -->
    <view class="uni-list-cell-db">
      <picker @change="bindPickerChange" :value="index" :range="pickList">
        <view class="uni-input">{{pickList[index]}}</view>
      </picker>
    </view>
  </view>
</template>

<script>
import { cloneDeep } from 'lodash'
export default {
  props: {
    item: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      cloneItem: {},
      pickList: [],
      index: 0
    }
  },
  watch: {
    item: {
      handler (val) {
        this.cloneItem = cloneDeep(this.item)
        const word = this.cloneItem.showKeyWord
        this.pickList = this.item.option.map(v => v[word])
      },
      deep: true
    }
  },
  mounted () {
    // if (this.item.type === 'option') {
    //   this.cloneItem = cloneDeep(this.item)
    // }
  },
  methods: {
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.index = e.target.value
    }
  },
}
</script>

<style>
</style>